$(function() {
  var pageSize = 5; //每页条数
  var currentPage = 1; //记录当前页面
  // 1- 渲染用户首页数据
  // 数据 + 模板
  // 1- 去后台获取用户第一屏的数据
  // 2- 配合模板引擎进行渲染
  // 3- 把渲染的结果添加到页面
  function render() {
    //其他参数:beforeSend在发送之前可以使用return false取消,timeout超时时间,error,async同步还是异步
    $.ajax({
      type: "get", //get或post
      url: "/user/queryUser", //请求的地址
      data: {
        pageSize: pageSize,
        page: currentPage
      }, //如果不需要传，则注释掉 请求的参数，a=1&b=2或{a:1,b:2}或者jq中的serialize方法，或者formData收集
      dataType: "json", //text,json,xml,jsonp
      success: function(res) {
        //成功的回调函数
        console.log(res);
        // 渲染返回数据
        $("tbody").html(template("tmp", res));
        // res.total 服务器数据的总数
        // 根据后台返回的真实的数据库总数生成分页
        setPage(res.total);
      }
    });
  }
  render();
  // 2-禁用启用
  // 1- 点击禁用/启用按钮， 弹出模态框， 获取当前数据id， 获取要进行操作
  // 2- 当点击确定操作按钮时，请求后台， 并且更新状态
  // 3- 更新数据成功后，页面重新渲染， 隐藏模态框
  var id = null;
  var isDelete = null;
  $("tbody").on("click", ".my-btn", function() {
    // id = $(this)
    //   .parent()
    //   .attr("data-id");
    id = $(this)
      .parent()
      .data("id");
    // console.log(id);
    isDelete = $(this).hasClass("btn-danger") ? 0 : 1;
    console.log(id, isDelete);
  });
  // 2- 当点击确定操作按钮时，请求后台， 并且更新状态
  // 3- 更新数据成功后，页面重新渲染， 隐藏模态框
  $(".btn-ok").click(function() {
    //其他参数:beforeSend在发送之前可以使用return false取消,timeout超时时间,error,async同步还是异步
    $.ajax({
      type: "post", //get或post
      url: "/user/updateUser", //请求的地址
      data: {
        id: id,
        isDelete: isDelete
      }, //如果不需要传，则注释掉 请求的参数，a=1&b=2或{a:1,b:2}或者jq中的serialize方法，或者formData收集
      dataType: "json", //text,json,xml,jsonp
      success: function(res) {
        //成功的回调函数
        render();
        $(".modal-user").modal("hide");
        console.log(res);
      }
    });
  });
  // 3- 分页功能
  // 页码的个数是变化的，取决于数据库数据的总数
  // total 表示数据库数据的总数
  function setPage(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage, //当前页  高亮效果加给谁
      totalPages: Math.ceil(total / pageSize), //总页数
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值,就是当前页面
        console.log(page);
        // 改写当前页码值
        currentPage = page;
        // 重新渲染
        render();
      }
    });
  }
});
